<script>
export default {
  emits: ['openEdit'],
  name: "UserTable",
  data() {
    return {
      list: [],
      meta: ['name', 'gender', 'age', 'is_active'],
      search: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const data = this.search
      this.$http.post('search', data)
          .then(res => {
            this.list = res
          })
    },
    remove(row) {
      const {id} = row
      this.$confirm('确认删除')
          .then(() => {
            return this.$http.delete(`remove/${id}`)
          })
          .then(() => {
            this.init()
          })
    },
    openEdit(row) {
      this.$emit('openEdit', row)
    }
  }
}
</script>

<template>
  <el-card>
    <template #header>
      <slot></slot>
    </template>
    <el-table border :data="list">
      <el-table-column
          v-for="key in meta"
          :key="key"
          :prop="key"
          :label="key"
      >
        <template #header>
          <el-input
              v-model="search[key]"
              :placeholder="`search ${key}`"
              @input="init"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="operations" width="120">
        <template #default="{row}">
          <el-button size="small" link type="warning" @click="openEdit(row)">Edit</el-button>
          <el-button size="small" link type="danger" @click="remove(row)">Remove</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>

</style>